// 渲染图片数据的时候 用https://res.vmallres.com/pimages//product/697222582043201/428_428_00E100D81511236A1C2978E3B652A9FE606789B2E33863E0mp.png
// https://res.vmallres.com/pimages/
// photoName: "706395CE98EB6A95286AFD0716D2C7E9293B7F42C1DDFBECmp.png"
// photoPath: "/product/6901443393244/"
// 拼接出img src


$(function () {

    class List {
        constructor() {
            this.getData()
            this.render_num = 0
            this.html = ''
            this.render_now = 0
        }
        getData() {
            var option = {
                url: "http://localhost:3000/static/data/list-pagination.json"
            }
            axios(option).then(res => {
                this.data = res.data
                this.classficationRender(this.data.labelList)
                this.phoneListRender()
                this.footer = document.querySelector("footer")
                this.bindEvent()
                // window.dispatchEvent( new Event("scroll"));
                this.page = new Pagination( res.data )
            })
        }

        bindEvent() {
            // 划过效果
            $(".phone").each((index, ele) => {
                on(ele, "mouseenter", () => {
                    $(".phone").eq(index).animate({ top: -3 })
                    $(".phone").eq(index).css({ "box-shadow": "0 0 8px #ddd" })
                })
                on(ele, "mouseleave", () => {
                    $(".phone").eq(index).animate({ top: 0 })
                    $(".phone").eq(index).stop(true, true)
                    $(".phone").eq(index).css({ "box-shadow": "none" })
                })
            })
            // 服务优惠 屏幕尺寸input
            $(".server .center div").each((index, ele) => {
                on(ele , "mouseover", a => {
                    $(".server .center input")[index].style.display = "block"
                })
                on(ele , "mouseout", a => {
                    $(".server .center input")[index].style.display = "none"
                })
            })
            $(".screen .center div").each((index, ele) => {
                on(ele, "mouseover", a => {
                    $(".screen .center input")[index].style.display = "block"
                })
                on(ele, "mouseout", a => {
                    $(".screen .center input")[index].style.display = "none"
                })
            })
            
        }


        // 数据渲染
        classficationRender(data) {
            var html = `<div class="class clear">
                <div class="left">分类</div>
                <div class="center">`
            // 点击更多就多渲染5个
            var render_num = data.length - 11;
            for (var i = 0; i < render_num; i++) {
                html += `<li><div>${data[i].categoryName}<div></li>`
            }
            html += `</div>
                <div class="right">更多</div>
            </div>`

            html += `<div class="server clear" >
                <div class="left">${data[0].labelContentList[0].displayName}</div>
                <div class="center">`
            var server_data = data[0].labelContentList[0].itemEntryList
            for (var i = 0; i < server_data.length; i++) {
                html += `<li><div><input type="checkbox">${server_data[i].value}</div></li>`
            }
            html += `</div></div>`


            html += `<div class="sert clear">
                <div class="left">排序</div>
                <div class="center">`
            var select_data = data[0].labelContentList
            html += `<li><div>综合</div></li>
            <li><div>最新</div></li>
            <li><div>评论数</div></li>
            <li><div>价格</div></li>`
            html += `</div></div>`
            $("#classfication-render").html(html)
        }
        phoneListRender() {
            var data = this.data.resultList
            this.render_num += 20
            
            for (var i = 0; i < this.render_num; i++) {
                this.html += `
                <li class="phone">
                    <img src="https://res.vmallres.com/pimages/${data[i].photoPath}428_428_${data[i].photoName}" alt="">
                    <h5>${data[i].name}</h5>
                    <div>
                        <p>￥3099</p><div>多款可选</div>
                    </div>
                    <dt>赠送积分</dt>
                    <b>21332人评价<span>99%好评</span></b>
                </li>`
                $("#phone-render").html(this.html)
            }
        }

    }
    var list = new List()


    class LazyLoad{
        constructor( ){
            this.imgs = Array.from(document.querySelectorAll(".phone img"))
            this.top_list = this.imgs.map( ele => this.getAbsTop(ele) )
            this.bindEvent()
            window.dispatchEvent(new Event("scroll"));
        }
        getAbsTop(ele){
            if( ele.offsetParent !== document.body ){
                return ele.offsetTop + this.getAbsTop(ele.offsetParent)
            }
            return ele.offsetTop
        }
        bindEvent(){
            window.addEventListener("scroll" , ()=>{
                this.load()
          })    
        }
        load(){
            for (let i = 0; i < this.top_list.length; i++) {
                if (this.top_list[i] <= scrollY + innerHeight) {
                    // 图片如果已经加载了那就直接删除掉这个图片就可以了; 
                    let loadImg = new Image();
                    loadImg.src = this.imgs[i].getAttribute("data-src");

                    let img = this.imgs[i]

                    loadImg.onload = () => {
                        img.src = img.getAttribute("data-src");
                    }
                    this.imgs.splice(i, 1)
                    this.top_list.splice(i, 1)
                    i--;
                    // 删除掉对应的元素和高度信息; 

                }
          }
        }
    }


    class Pagination {
        constructor(data) {
            
            this.data = data.resultList;
            // 创建默认参数; 

            // 一页默认显示十条数据; 
            this.show_num = 10
            // 当前的页码 ; 
            this.index = 0
            // 分页内容总条数; 
            this.count = this.data.length,
            // 中间显示的页码数量; 
            this.show_page_count = 11
            
            this.container = document.getElementById("phone-render");
            this.pagination = document.querySelector(".pagination");
            // 计算总页数;
            this.total_page_num = Math.ceil(this.count / this.show_num);
            
            // show_page_count 数据必须是奇数;
            if (this.show_page_count % 2 !== 1) {
                this.show_page_count++;
            }
            this.phoneListRender();
            this.renderBullet();
            this.bindEvent();
        }
        bindEvent() {
            on(this.pagination, "click", "span", (e) => {
                this.index = e.origin.innerText - 1;
                this.phoneListRender();
                this.renderBullet();
            })
            on(this.pagination, "click", ".start", (e) => {
                this.index = 0;
                this.phoneListRender();
                this.renderBullet();
                this.bindEvent();
            })
            on(this.pagination, "click", ".end", (e) => {
                this.index = this.total_page_num - 1;
                this.phoneListRender();
                this.renderBullet();
                this.bindEvent();
            })
            on(this.pagination, "click", ".next", (e) => {
                this.add();
            })
            on(this.pagination, "click", ".prev", (e) => {
                this.reduce();
            })

            this.pagination.addEventListener("selectstart", (e) => {
                e.preventDefault();
            })
            $(".phone").each((index, ele) => {
                on(ele, "mouseenter", () => {
                    $(".phone").eq(index).animate({ top: -3 })
                    $(".phone").eq(index).css({ "box-shadow": "0 0 8px #ddd" })
                })
                on(ele, "mouseleave", () => {
                    $(".phone").eq(index).animate({ top: 0 })
                    $(".phone").eq(index).stop(true, true)
                    $(".phone").eq(index).css({ "box-shadow": "none" })
                })
            })
            // 保存数据跳转
            $(".phone").each( ( index , ele ) => {
                
                on( ele , "click" , a => {
                    console.log(index);
                    this.saveId( index )
                })
            })
        }
        saveId( index ){
            var data = this.data
            // 给一个页面标志 方便detail请求数据
            cookie( "html" , "lifelist" )
            cookie( "productId" , data[index].productId )
            window.open( "http://localhost:3000/dist/detail.html" , "_blank" )
        }
        phoneListRender() {
            var data = this.data
            this.render_num += 10
            var html = ''
            for (let i = this.index * this.show_num; i < (this.index + 1) * this.show_num; i++) {
                
                if ( data[i] === 'undefined') continue;
                html += `
                <li class="phone">
                    <img src="https://res.vmallres.com/pimages/${data[i].photoPath}428_428_${data[i].photoName}" alt="">
                    <h5>${data[i].name}</h5>
                    <div>
                        <p>￥3099</p><div>多款可选</div>
                    </div>
                    <dt>赠送积分</dt>
                    <b>21332人评价<span>99%好评</span></b>
                </li>`
                $("#phone-render").html(html)
            }
        }
        renderBullet() {
            //创建结构的核心在于，当前页面有多少条数据; 
            // - 总页数计算方式 : 总数量 / 每页显示数量 向上取整  
            let html = "";

            html += "<strong class='start'>开头</strong>"
            html += "<em class='prev'><</em>"

            // start : 页码的起始点; 
            // end   : 页码的终点; 
            
            let start = this.index - 1;
            let end = this.index + 3;


            // - 判定分页的起始点; 
            if (this.index <= 2) {
                start = 1;
                end = start + this.show_page_count;
            }

            //  this.total_page_num > this.show_page_count + 1  && this.index   : 
            if (this.total_page_num > this.show_page_count + 1 && this.index >= this.total_page_num - 2) {
                end = this.total_page_num;
                start = end - 5;
            }

            // - end 极值判断; 
            // - end 的最大值不能超过页码总数; 

            if (end >= this.total_page_num) {
                end = this.total_page_num;
            }
            if (!(this.total_page_num > this.show_page_count + 1)) {
                start = 1;
            }

            //**** */
            
            if (this.total_page_num > this.show_page_count + 1 && this.index >= 3) {
                html += "<span>1</span>"
                html += "<b>...</b>"
            }

            // 带有省略号的渲染; 
            for (let i = start; i <= end; i++) {
                html += `<span ${i - 1 === this.index ? "class='active'" : ""}>${i}</span>`
            }

            if (this.total_page_num > this.show_page_count + 1 && this.index <= this.total_page_num - 4) {
                html += "<b>...</b>"
                html += "<span>" + this.total_page_num + "</span>"
            }

            html += "<em class='next'>></em>"
            html += "<strong class='end'>结尾</strong>"

            this.pagination.innerHTML = html;
        }

        add() {
            if (this.index >= this.total_page_num - 1) {
                return false;
            }
            this.index++
            this.phoneListRender();
            this.renderBullet();
        }
        reduce() {
            if (this.index <= 0) {
                return false;
            }
            this.index--
            this.phoneListRender();
            this.renderBullet();
        }
    }



})